import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const longText = '这是一段很长的文本，用于演示省略与换行控制，这是一段很长的文本，用于演示省略与换行控制，这是一段很长的文本，用于演示省略与换行控制。';

const TextTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 20 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
        col: { gap: 12 },
        borderedRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 8, borderRadius: 8 },
    });

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'Text 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="TextTestScreen"
        >
            {/* 变体与颜色 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>变体与颜色</UI.Text>
                    <View style={styles.col}>
                        <UI.Text variant="h1" color="primary" testID="text-variant-h1-primary">H1 标题 - Primary</UI.Text>
                        <UI.Text variant="h2" color="secondary" testID="text-variant-h2-secondary">H2 标题 - Secondary</UI.Text>
                        <UI.Text variant="h3" color="text" testID="text-variant-h3-text">H3 标题 - Text</UI.Text>
                        <UI.Text variant="h4" color="textSecondary" testID="text-variant-h4-textsecondary">H4 标题 - 次要文本色</UI.Text>
                        <UI.Text variant="body1" color="onSurface" testID="text-variant-body1-onsurface">Body1 正文 - OnSurface</UI.Text>
                        <UI.Text variant="caption" color="warning" testID="text-variant-caption-warning">Caption 说明 - Warning</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 对齐/粗细/斜体/下划线/删除线 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>排版样式</UI.Text>
                    <View style={styles.col}>
                        <UI.Text variant="body1" style={{ textAlign: 'left' }} testID="text-align-left">左对齐文本</UI.Text>
                        <UI.Text variant="body1" style={{ textAlign: 'center' }} testID="text-align-center">居中文本</UI.Text>
                        <UI.Text variant="body1" style={{ textAlign: 'right' }} testID="text-align-right">右对齐文本</UI.Text>
                        <UI.Text variant="body1" style={{ fontWeight: '700' }} testID="text-weight-bold">加粗文本</UI.Text>
                        <UI.Text variant="body1" style={{ fontStyle: 'italic' }} testID="text-italic">斜体文本</UI.Text>
                        <UI.Text variant="body1" style={{ textDecorationLine: 'underline' }} testID="text-underline">下划线文本</UI.Text>
                        <UI.Text variant="body1" style={{ textDecorationLine: 'line-through' }} testID="text-strikethrough">删除线文本</UI.Text>
                        <UI.Text variant="body1" style={{ letterSpacing: 1 }} testID="text-letterspacing-1">字间距 1</UI.Text>
                        <UI.Text variant="body1" style={{ lineHeight: 28 }} testID="text-lineheight-28">行高 28（仅演示该行）</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 超长省略与换行：numberOfLines + ellipsizeMode */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>省略与换行</UI.Text>
                    <View style={styles.col}>
                        <UI.Text variant="body1" numberOfLines={1} ellipsizeMode="tail" testID="text-ellipsis-tail">{longText}</UI.Text>
                        <UI.Text variant="body1" numberOfLines={1} ellipsizeMode="head" testID="text-ellipsis-head">{longText}</UI.Text>
                        <UI.Text variant="body1" numberOfLines={1} ellipsizeMode="middle" testID="text-ellipsis-middle">{longText}</UI.Text>
                        <UI.Text variant="body1" numberOfLines={1} ellipsizeMode="clip" testID="text-ellipsis-clip">{longText}</UI.Text>
                        <UI.Text variant="body1" numberOfLines={3} testID="text-multiline-3">{longText}</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 可选中与可点击 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>交互</UI.Text>
                    <View style={styles.row}>
                        <UI.Text variant="body1" selectable testID="text-selectable">该文本可被选中复制</UI.Text>
                        <UI.Text
                            variant="body1"
                            color="primary"
                            onPress={() => { }}
                            testID="text-pressable"
                        >
                            可点击文本（onPress）
                        </UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 间距能力：SpacingProps */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距能力</UI.Text>
                    <View style={[styles.row, styles.borderedRow]}>
                        <UI.Text variant="body1" m={8} testID="text-spacing-m-8">m=8</UI.Text>
                        <UI.Text variant="body1" mh={12} testID="text-spacing-mh-12">mh=12</UI.Text>
                        <UI.Text variant="body1" mv={12} testID="text-spacing-mv-12">mv=12</UI.Text>
                        <UI.Text variant="body1" p={8} backgroundColor={colors.surface} testID="text-spacing-p-8">p=8（含背景示例）</UI.Text>
                        <UI.Text variant="body1" ph={16} backgroundColor={colors.surface} testID="text-spacing-ph-16">ph=16</UI.Text>
                        <UI.Text variant="body1" pv={8} backgroundColor={colors.surface} testID="text-spacing-pv-8">pv=8</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 自定义样式：字体大小/颜色/背景 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>自定义样式</UI.Text>
                    <View style={styles.row}>
                        <UI.Text variant="body1" style={{ fontSize: 18 }} testID="text-style-fontsize-18">fontSize=18</UI.Text>
                        <UI.Text variant="body1" style={{ color: '#1976D2' }} testID="text-style-custom-color">自定义颜色 #1976D2</UI.Text>
                        <UI.Text variant="body1" style={{ backgroundColor: '#E3F2FD', paddingHorizontal: 8, paddingVertical: 4 }} testID="text-style-bg-padding">浅蓝背景 + 内边距</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 无障碍 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>无障碍</UI.Text>
                    <View style={styles.row}>
                        <UI.Text
                            variant="body1"
                            testID="text-accessibility"
                        >
                            无障碍标签与提示
                        </UI.Text>
                    </View>
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default TextTestScreen;